<template>
  <a :class="`tw-libbutton x${_uid}`  + (text.disabled ? ' disabled' : '')"
    :target="linkTargetIsBlank?'_blank':'_self'"
    @click="handleClick">
    <template v-if="showImg">
      <img v-if="text.imgUrl" class="xicon" :src="text.imgUrl" />
      <img v-else-if="icons[0]" class="xicon" :src="`${$twApp.fileBaseUrl}${icons[0].localPath}`" />
    </template>
    <span v-if="text.content" v-html="text.content"></span>
    <span v-else>&nbsp;</span>
  </a>
</template>

<script>
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
// import { Loading } from 'element-ui'

import props from './props'
import style from '../tw-lib-base/style'
import border from '../tw-lib-base/border/mixins'

export default {
  name: 'tw-lib-link',

  mixins: [style, border],

  props,

  computed: {
    style () {
      return Object.assign({
        padding: `${this.paddingY} ${this.paddingX}`,
        lineHeight: this.lineHeight,
        fontSize: this.fontSize,
        color: this.color,
        backgroundColor: this.backgroundColor,
        borderRadius: this.borderRadius,
        hoverBg: this.hoverBg,
        hoverColor: this.hoverColor,
        bgImg: this.bgImg,
        borderColor: this.borderColor,
        shadow: this.shadow,
        shadowSize: this.shadowSize,
        customBorderRadius: this.customBorderRadius
      }, this.borderStyle)
    }
  },

  methods: {
    handleClick () {
      window.ppp = this
      console.log('ddddd', this)
      const vm = this
      vm.$emit('click', vm.text.value)
      // let loadingInstance = window.$ui.msgs.loading.service({ fullscreen: true })
      const selector = vm.seletcor
      vm.getPdf(vm.text.name, selector)
      setTimeout(function () {
        // loadingInstance.close()
      }, 3000)
    },
    getPdf (title, selector) {
      const vm = this
      html2Canvas(document.querySelector(selector), {
        allowTaint: true,
        background: '#fff'
      }).then(function (canvas) {
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        const pageHeight = contentWidth / parseFloat(vm.canvasWidth) * parseFloat(vm.canvasHeight)
        let leftHeight = contentHeight
        let position = 0
        const imgWidth = parseFloat(vm.canvasWidth)
        const imgHeight = parseFloat(vm.canvasWidth) / contentWidth * contentHeight
        const pageData = canvas.toDataURL('image/jpeg', 1.0)
        const PDF = new JsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= parseFloat(vm.canvasHeight)
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(title + '.pdf')
      })
    },
    setStyle () {
      // ::root 表示组件根元素选择器
      let style = `
        ::root.tw-libbutton  {
          padding: ${this.paddingY} ${this.paddingX};
          line-height: ${this.lineHeight};
          font-size: ${this.fontSize};
          color: ${this.color};
          background-color: ${this.backgroundColor};
          border-radius: ${this.customBorderRadius};
          box-shadow: ${this.shadow ? `${this.shadowSize} ${this.shadow}` : 'none'};
        }

        ::root.tw-libbutton:hover  {
          color: ${this.hoverColor};
          background-color: ${this.hoverBg};
        }

        ::root.tw-libbutton.disabled {
          background-color: ${this.disabledColor};
        }
      `

      if (this.showImg) {
        style += `
          ::root.tw-libbutton .xicon {
            vertical-align: middle;
            height: ${this.iconHeight};
            margin-right: ${this.iconRight};
          }
        `
      }
      if (this.gradientType === 'radial') {
        style += `
          ::root.tw-libbutton {
            background-image: radial-gradient(${this.gradient});
            // background: linear-gradient(-69deg, #012451, #0261A6, #015CAC);
          }
        `
      } else if (this.gradientType === 'linear') {
        style += `
          ::root.tw-libbutton {
            background-image: linear-gradient(${this.gradient});
          }
        `
      } else if (this.gradientType === 'repeatlinear') {
        style += `
          ::root.tw-libbutton {
            background-image: repeating-linear-gradient(${this.gradient});
          }
        `
      } else if (this.gradientType === 'repeatradial') {
        style += `
          ::root.tw-libbutton {
            background-image: repeating-radial-gradient(${this.gradient});
          }
        `
      }

      if (this.hasBorder) {
        style += `
          ::root.tw-libbutton  {
            border: ${this.borderSize} ${this.borderType} ${this.borderColor};
          }
        `
      }

      if (this.bgImg[0]) {
        style += `
          ::root.tw-libbutton  {
            background-image: url("${this.$twApp.fileBaseUrl}${this.bgImg[0].localPath}");
          }
        `
      }

      this.addStyle(style)
    }
  }

  // watch: {
  //   colors: {
  //     deep: true,
  //     handler () {
  //       this.setStyle()
  //     }
  //   }
  // }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
